1. 布林 Boolean

• 例子 :
  $is-dark-mode: true; // 是否啟用暗模式

body {
@if $is-dark-mode {
background-color: black; // 如果啟用了暗模式，設置背景色為黑色
color: white; // 字體顏色為白色
} @else {
background-color: white; // 否則背景色為白色
color: black; // 字體顏色為黑色
}
}

• 編譯後 :
  body {
  background-color: black;
  color: white;
  }
• 根據布林變數 $is-dark-mode 的值，@if 語句決定應用的樣式
• 由於 $is-dark-mode 為 true，背景色為黑色，字體顏色為白色

2. 空值 Null

• 例子 :
  $border-color: null; // 定義空值

.button {
border-color: $border-color !default; // 如果 $border-color 為 null，則不設置邊框顏色
}

• 編譯後 :
  .button {
  /* 沒有 border-color，因為 $border-color 是 null */
  }
• 由於 $border-color 是 null，編譯後的 CSS 中沒有 border-color 屬性

3. 函式參與 Function references

• 例子 :
  @function calculate-rem($size-px) {
  @return $size-px / 16 * 1rem; // 自定義函式，將像素轉換為 rem
  }

$font-size-function: calculate-rem; // 將函式作為變數引用

body {
font-size: $font-size-function(18px); // 使用函式計算 font-size
}

• 編譯後 :
  body {
  font-size: 1.125rem;
  }
• 自定義函式 calculate-rem 將 18px 轉換為 1.125rem
• font-size-function(18px) 調用了這個函式，計算結果是 1.125rem